<template>
  <div class="mod-config">
    <div v-if="bookmanages">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
        <el-form-item>
          <el-select v-model="dataForm.isAlive" placeholder="请选择书籍状态">
            <el-option
              v-for="item in options"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.isFree" placeholder="请选择是否收费 ">
            <el-option
              v-for="isFreeitem in dateSelect"
              :key="isFreeitem.value"
              :label="isFreeitem.label"
              :value="isFreeitem.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.recommendType" placeholder="请选择推荐状态 ">
            <el-option
              v-for="typeitem in recommends"
              :key="typeitem.value"
              :label="typeitem.label"
              :value="typeitem.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.bookName" placeholder="书籍名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.id" placeholder="书籍编号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="search()">查询</el-button>
          <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
          <el-button
            type="danger"
            @click="deleteHandle()"
            :disabled="dataListSelections.length <= 0"
          >批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" header-align="center" align="center" label="编号"></el-table-column>
        <el-table-column prop="bookName" header-align="center" align="center" label="书籍名称"></el-table-column>
        <el-table-column prop="coverUrl" header-align="center" align="center" label="书籍封面">
          <template slot-scope="scope">
            <img :src="scope.row.coverUrl" style="width: 40px;
    height: 40px;">
          </template>
        </el-table-column>
        <el-table-column prop="author" header-align="center" align="center" label="书籍作者"></el-table-column>
        <el-table-column prop="speaker" header-align="center" align="center" label="讲师"></el-table-column>
        <el-table-column prop="chapterNumber" header-align="center" align="center" label="书籍章节数"></el-table-column>
        <el-table-column prop="categoryList" header-align="center" align="center" label="书籍类型">
          <template slot-scope="scope">
            <span v-if="scope.row.categoryList==null">--</span>
            <span v-else>{{getBookType(scope.row.categoryList)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="wordNumber" header-align="center" align="center" label="书籍字数"></el-table-column>

        <el-table-column prop="recommend" header-align="center" align="center" label="是否推荐">
          <template slot-scope="scope">
            <span v-if="scope.row.recommend == null">--</span>
            <span v-else>
              <!-- {{scope.row.recommend.type=='1'?'免费推荐':''}} -->
              {{scope.row.recommend.type=='2'?'周推荐':''}}
              {{scope.row.recommend.type=='3'?'新书推荐':''}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="isFree" header-align="center" align="center" label="是否免费">
          <template slot-scope="scope">
            <span v-if="scope.row.isFree == null">--</span>
            <span v-else>
              {{scope.row.isFree.isFree=='1'?'免费':''}}
              {{scope.row.isFree.isFree=='0'?'收费':''}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="hasVideo" header-align="center" align="center" label="有无视频">
          <template slot-scope="scope">
             {{scope.row.hasVideo=='1'?'有':'无'}}
          </template>
        </el-table-column>
        <el-table-column prop="bookVisit" header-align="center" align="center" label="初始访问量"></el-table-column>
        <el-table-column prop="bookHeat" header-align="center" align="center" label="初始热度量"></el-table-column>
        <el-table-column prop="isAlive" header-align="center" align="center" label="状态">
          <template slot-scope="scope">
            {{ scope.row.isAlive === 1 ? '上架' : '' }}
            {{ scope.row.isAlive === 0 ? '下架' : '' }}
            {{ scope.row.isAlive === 2 ? '定时上架' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="publishTime" header-align="center" align="center" label="上架时间">
          <template slot-scope="scope">
            {{ scope.row.publishTime || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="gmtCreated" header-align="center" align="center" label="创建时间"></el-table-column>
        <el-table-column prop="gmtUpdate" header-align="center" align="center" label="更新时间"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detailView(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
            <el-button type="text" size="small" @click="shelfHandle(scope.row.id)">上/下架</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
            <el-button type="text" size="small" @click="chapter(scope.row)">章节</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <!-- 弹窗上架/下架 -->
      <shelf-update v-if="shelfVisible" ref="shelfUpdate" @refreshDataList="getDataList"></shelf-update>
      <!-- 查看 -->
      <view-detail v-if="viewDetail" ref="detail" @refreshDataList="getDataList"></view-detail>
    </div>
    <div v-else>
      <book-chapter v-if="bookchapters" :id="bookId" :hasVideo="hasVideo" @goBack="hideChange"></book-chapter>
    </div>
  </div>
</template>

<script>
import AddOrUpdate from "./bookinfo-add-or-update";
import ShelfUpdate from "./bookinfo-shelf-or-update";
import ViewDetail from "./bookinfo-view-details";
import BookChapter from "./bookchapter";
export default {
  data() {
    return {
      // 书籍状态
      options: [
        {
          val: "0",
          label: "下架"
        },
        {
          val: "1",
          label: "上架"
        }
      ],
      // 收费状态
      dateSelect: [
        {
          value: "0",
          label: "收费"
        },
        {
          value: "1",
          label: "免费"
        }
      ],
      //推荐状态
      recommends: [
        {
          value: "2",
          label: "周推荐"
        },
        {
          value: "3",
          label: "新书推荐"
        }
      ],
      dataForm: {
        key: "",
        isFree: "",
        isAlive: "",
        recommendType: "",
        bookName: "",
        id: ""
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      // 上架
      shelfVisible: false,
      viewDetail: false,
      bookmanages: true,
      bookchapters: false, //章节
      bookId: "",
      hasVideo:'',
    };
  },
  components: {
    AddOrUpdate,
    ShelfUpdate,
    ViewDetail,
    BookChapter
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    search() {
      this.pageIndex = 1
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      let obj = {
        page: this.pageIndex,
        limit: this.pageSize,
        key: this.dataForm.key
      };
      if (this.dataForm.isAlive) {
        obj.isAlive = this.dataForm.isAlive;
      }
      if (this.dataForm.isFree) {
        obj.isFree = this.dataForm.isFree;
      }
      if (this.dataForm.recommendType) {
        obj.recommendType = this.dataForm.recommendType;
      }
      if (this.dataForm.id) {
        obj.id = this.dataForm.id;
      }
      if (this.dataForm.bookName) {
        obj.bookName = this.dataForm.bookName;
      }
      this.$http({
        url: this.$http.adornUrl("/course/bookinfo/list"),
        method: "get",
        params: this.$http.adornParams(obj)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 上架/下架
    shelfHandle(id) {
      this.shelfVisible = true;
      this.$nextTick(() => {
        this.$refs.shelfUpdate.init(id);
      });
    },
    detailView(data) {
      console.log(data);
      this.viewDetail = true;
      let obj = {};
      obj.id = data.id;
      obj.hasVideo = data.hasVideo
      console.log(obj.hasVideo)
      this.$nextTick(() => {
        this.$refs.detail.init(obj);
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/course/bookinfo/delete"),
          method: "post",
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },

    getBookType(list) {
      if (list == null) {
        return;
      } else {
        let arr = [];
        let len = list.length;
        for (let i = 0; i < len; i++) {
          arr.push(list[i].categoryName);
        }
        return arr.join("、");
      }
    },
    // 章节
    chapter(data) {
      this.bookId = data.id;
      this.hasVideo = data.hasVideo;
      this.bookmanages = false;
      this.bookchapters = true;
      console.log(this.bookId);
      // this.$nextTick(() => {
      //   this.$refs.seebookchapter.init(id);
      // });
    },
    hideChange() {
      this.bookmanages = true;
      this.bookchapters = false;
    }
  }
};
</script>
